<template>
  <div style="width:100%;height:100vh;background:#f5f5f5;">
    <mt-header title="设置中心" style="background:#fff;color:#000;">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="user_top_center">

      <div class="center_right">
        头像
      </div>
      <div class="center_left" style>
        <img src="@/assets/head.png" alt style>
      </div>
    </div>
    <div>
      <div class="user_list_box">
        <div class="user_list" style @click="verified">
          <div class="user_list_left">
            <span>账号</span>
          </div>
          <div class="list_bottom">
            <span>15538283601</span>
            <img src="@/assets/rightgo.png" alt>
          </div>
        </div>
        <div class="user_list" style @click="verified">
          <div class="user_list_left">
            <span>昵称</span>
          </div>
          <div class="list_bottom">
            <span>刘盼盼</span>
            <!-- <img src="@/assets/rightgo.png" alt> -->
          </div>
        </div>
        <div class="user_list" style @click="verified">
          <div class="user_list_left">
            <span>修改密码</span>
          </div>
          <div class="list_bottom">
            <span></span>
            <img src="@/assets/rightgo.png" alt>
          </div>
        </div>
      </div>
      <div class="user_list_box">
        <div class="user_list" style @click="loginpassword">
          <div class="user_list_left">
            <span>赛期</span>
          </div>
          <div class="list_bottom">
            <span>
              版本10.18
            </span>
            <!-- <img src="@/assets/rightgo.png" alt> -->
          </div>
        </div>
      </div>
      <div class="user_list_box">
        <div class="user_list" style @click="loginpassword">
          <div class="user_list_left">
            <span>版本详情</span>
          </div>
          <div class="list_bottom">
            <span style="color: rgb(171, 171, 171);">

            </span>
            <img src="@/assets/rightgo.png" alt>
          </div>
        </div>

      </div>
      <div class="user_list_box">
        <div class="user_list" style @click="loginpassword">
          <div class="user_list_left">
            <span>法律条款与隐私政策</span>
          </div>
          <div class="list_bottom">
            <span style="color: rgb(171, 171, 171);">
            </span>
            <img src="@/assets/rightgo.png" alt>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      verified() {
        this.$router.push({
          path: "verified"
        });
      },
      binding() {
        this.$router.push({
          path: "Authentication"
        });
      },
      loginpassword() {
        this.$router.push({
          path: "loginpassword"
        });
      },
      withdrawalpassword() {
        this.$router.push({
          path: "withdrawalpassword"
        });
      },
      bind() {
        this.$router.push({
          path: 'bindphone'
        })
      },
    }
  };
</script>

<style scoped>
  .user_top_center {
    margin-top: .2rem;
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
  }

  .center_left {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .center_right {
    width: 50%;
    height: 100%;
    color: #000;
    font-size:30px;
    letter-spacing: 1px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem;
    box-sizing: border-box;
  }

  .center_left img {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 100%;
  }

  .user_list {
    width: 100%;
    height: 1rem;
    background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .user_list_box {
    margin-top: 0.2rem;
  }

  .user_list {
    width: 100%;
    height: 1.2rem;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;
    box-sizing: border-box;
  }

  .user_list_left {
    display: flex;
    align-items: center;
  }

  .user_list_left>img {
    width: 0.6rem;
    height: 0.6rem;
    vertical-align: middle;
    margin-right: 0.2rem;
  }

  .user_list_left>span {
    letter-spacing: 2px;
    font-size:30px;
  }

  .list_bottom img {
    width: 0.45rem;
    height: 0.4rem;
    vertical-align: middle;
  }

  .list_bottom {
    display: flex;
    align-items: center;
  }

  .list_bottom span {
    color: #333;
    font-size:30px;
    letter-spacing: 1px;
  }
</style>
